<template>
  <div class="listAll">
    <div class="listTitle">
      <h4>今日推荐</h4>
      <p><span></span>Today the optimization<span></span></p>
    </div>
    <swiper :options="swiperList">
      <swiper-slide v-for="(item, index) in optimizationList" :key="index">
        <div class="list">
          <div class="listImg">
            <a href="javascript:void(0);" @click="divClick(item.id)">
              <img :src="item.imgUrl" alt>
            </a>
            <h3>{{item.title}}</h3>
            <p class="details">农家种植，生长周期长</p>
            <div class="listBottom">
              <div class="lb_left">
                <p>500ml*2</p>
                <span>￥{{item.price}}</span>
              </div>
              <i class="iconfont icon-huoche" @click="addCart(item)"></i>
            </div>
          </div>
        </div>
      </swiper-slide>
    </swiper>
    <div class="popup" v-if="pupop">
      <i class="iconfont icon-success"></i>
      <span>添加购物车成功</span>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
import {
  swiper,
  swiperSlide
} from 'vue-awesome-swiper'
import {
  setTimeout,
  clearTimeout
} from 'timers'
export default {
  name: 'list',
  components: {
    swiper,
    swiperSlide
  },
  props: ['optimizationList'],
  data () {
    return {
      swiperList: {
        slidesPerView: 2.5,
        spaceBetween: 10,
        loop: false,
        autoplay: false,
        freeMode: true
      },
      pupop: false,
      addJson: []
    }
  },
  methods: {
    divClick: function (e) {
      this.$router.push({
        path: '/detail',
        query: {
          id: e
        }
      })
    },
    /** 加入購物車 */
    addCart: function (item) {
      this.$store.commit('changeCartStatus', false) /* 实时更新 */
      localStorage.setItem('cartStatus', true) /* 改变首页存储购物车的状态 */
      /**  console.log(this.$store.state.cartStatus) */
      /** 通過緩存 存儲 加入購物車的物品 */
      this.addJson.push(item)
      var json = JSON.stringify(this.addJson)
      localStorage.setItem('item', json)
      // console.log(typeof(json),json)

      /** 显示弹窗 */
      this.pupop = true
      var that = this
      var timer = setTimeout(function () {
        that.pupop = false
        clearTimeout(timer)
      }, 1000)

      /** 设置购物车的商品数量 存入缓存  store 可以时时更新 */
      var cartNum = sessionStorage.getItem('cartNum')
      if (cartNum !== '' && cartNum !== null) {
        cartNum = Number(cartNum)
        cartNum += 1
        sessionStorage.setItem('cartNum', cartNum)
        this.$store.commit('addCratNum', cartNum)
      } else {
        sessionStorage.setItem('cartNum', 1)
      }
    }
  }
}

</script>

<style scoped>
  .popup {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 3.6rem;
    height: 1.2rem;
    margin-left: -1.8rem;
    margin-top: -0.6rem;
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .2rem 0;
    border-radius: 3px;
  }

  .popup i {
    font-size: .5rem;
    color: #fff;
    display: block;
  }

  .popup span {
    font-size: .28rem;
    color: #fff;
    margin-top: .2rem;
  }

  .listAll {
    padding: 0 .3rem;
    margin-top: .2rem;
    background-color: #fff;
  }

  .listAll .listTitle {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: .2rem;
  }

  .listAll .listTitle h4 {
    font-size: .28rem;
    color: #434343;
  }

  .listAll .listTitle p {
    font-size: .24rem;
    color: #434343;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: .1rem;
  }

  .listAll .listTitle p span {
    width: .4rem;
    height: 2px;
    background-color: #333;
  }

  .list {
    padding: 0;
  }

  .list .listImg {
    width: 2.4rem;
    display: flex;
    flex-direction: column;
    margin-top: 0.2rem;
  }

  .list .listImg a {
    display: block;
  }

  .list .listImg a img {
    width: 2.4rem;
    height: 2.4rem;
    display: block;
  }

  .list .listImg h3 {
    font-size: 0.24rem;
    margin-top: 0.12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 90%;
  }

  .list .listImg .details {
    font-size: 0.24rem;
    color: #909090;
    margin: 0.12rem 0;
  }

  .list .listImg .listBottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .list .listImg .listBottom .lb_left p {
    font-size: 0.24rem;
    color: #909090;
  }

  .list .listImg .listBottom .lb_left span {
    font-size: 0.28rem;
    display: block;
    color: #ff712b;
    height: 0.5rem;
    line-height: 0.5rem;
  }

  .list .listImg .listBottom i {
    color: #ff712b;
    font-size: 0.4rem
  }

</style>
